<template>
  <panel icon="ios-pie" class="db-server" type="success" :max-height="300" :title="name" :enableToggle="false">
    <ButtonGroup shape="circle" slot="extra">
      <Button type="primary" icon="md-information-circle" :to="{ path: '/db/status', query: { dbIndex: dbIndex } }">状态</Button>
    </ButtonGroup>
    <p v-if="dbs.length > 0" style="color:#19be6b">连接成功（数据库列表如下所示）！</p>
    <p v-else>--</p>
    <p v-for="(item, index) in dbs" :key="index">
      <router-link :to="{ name: 'DbDetail', params: { dbIndex: dbIndex, schema: item.SCHEMA_NAME } }">
        {{ item.SCHEMA_NAME }}
      </router-link>
    </p>
  </panel>
</template>

<script>
export default {
  name: 'server-info',
  props: {
    name: String,
    dbIndex: {
      type: [String, Number],
      default: '0',
      required: true
    },
    dbType: {
      type: String,
      default: 'mysql',
      required: false
    }
  },
  data() {
    return {
      dbs: []
    };
  },
  mounted() {
    this.$http.get(`/api/${this.dbType}/${this.dbIndex}/dbs`).then(response => {
      this.dbs = response.datas;
    });
  }
};
</script>

<style lang="less" scoped>
.db-server {
  &.ivu-card {
    .ivu-card-body {
      p {
        font-size: 14px;
        line-height: 24px;
      }
    }
  }
}
</style>
